<template>
  <div class="job-box">
    <div>关键词对应(请将左侧分类词对应到右侧统一分类词)</div>
    <el-button type="primary" class="btn" @click="refresh">
      执行一遍之前的对应任务（每次对应前先点这个）
    </el-button>
    <div class="claimJob">
      <div class="checkCate">
        <el-card>
          <el-checkbox-group v-model="checkList" v-for="(item, index) in team" :key="index">
            <el-checkbox :label="item"></el-checkbox>
          </el-checkbox-group>
        </el-card>
      </div>
      <div class="centerLine"></div>
      <div class="checkKey">
        <el-card class="">
          <el-radio-group v-model="job">
            <el-radio-button v-for="(tag, index) in tags" :label="tag" :key="index">
              {{ tag.dictValue }}
            </el-radio-button>
          </el-radio-group>
        </el-card>
        <el-button type="primary" class="keyBtn" @click="toKey">对应关键字</el-button>
      </div>
    </div>
    <el-dialog
      :visible="dialog"
      title="请确定对应词正确后操作"
      width="300px"
      @close="dialog = false"
    >
      <div class="btn-box">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button type="cancle" @click="dialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checkList: [],
        cateList: [],
        team: [],
        tags: [],
        job: [],
        dialog: false,
      };
    },
    mounted() {
      this.getFilmTeam();
      this.getRole();
    },
    methods: {
      //刷新当前页面
      refresh() {
        location.reload();
      },
      getFilmTeam() {
        this.$service.FilmUserTeam({ dictType: 4 }).then((res) => {
          this.team = res;
        });
      },
      getRole() {
        this.$service.JmDictList({ type: 4 }).then((res) => {
          this.tags = res;
        });
      },
      toKey() {
        this.dialog = true;
      },
      submit() {
        this.$service
          .FilmUserTeamUpdate({ dictValue: this.job.dictValue, teams: this.checkList.toString() })
          .then((res) => {
            this.dialog = false;
            this.$message.success('操作成功');
            location.reload();
          });
      },
    },
  };
</script>
<style lang="less" scoped>
  .job-box {
    padding: 20px;
  }
  .btn {
    margin-top: 20px;
  }
  .claimJob {
    margin-top: 20px;
    height: 650px;
    border-top: 1px solid #696969;
    display: flex;
  }
  .centerLine {
    border-left: 1px solid #696969;
  }
  .checkCate {
    padding: 20px;
  }
  .checkKey {
    padding: 20px;
  }
  .keyBtn {
    margin-top: 30px;
    margin-left: 10px;
  }
  .btn-box {
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
  }
  ::v-deep .el-card__body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  ::v-deep .el-radio-group {
    display: flex;
    flex-wrap: wrap;
    grid-row-gap: 5px;
  }

  ::v-deep .el-radio-button,
  .el-radio-button__inner {
    margin-left: 10px;
  }

  ::v-deep .el-radio-button__inner {
    border: 1px solid #dcdfe6;
  }
  ::v-deep .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0px;
  }
  ::v-deep .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 0px;
  }
</style>
